<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
        .date-container{
            user-select: none;
        }
        .date-operate{
            background:transparent;
            border:none;
            outline: none;
        }
        .date-operate:disabled{
            cursor:not-allowed;
        }
    </style>
    <div class="date-container">
            <button class="date-operate" id="before"><</button>
            <span id="date"></span>
            <button class="date-operate" id="next">></button>
    </div>
    <script>
                    var before = document.querySelector("#before"),
                        date = document.querySelector("#date"),
                        next = document.querySelector("#next"),
                        //前后执行了多少步,向前就加一，向后就减一
                        n = 0,
                        //一天的毫秒数
                        perDeviation = 24*60*60*1000;
                        render();
                        before.addEventListener("click",function(){
                            n--;
                            render();
                        });
                        next.addEventListener("click",function(){
                            n++;
                            render();
                        });
                        function render(){
                            before.disabled = n===-30;
                            next.disabled = !n;
                            date.textContent =new Date(new Date().getTime()+n*perDeviation).toLocaleDateString();
                        }
                </script>
</body>
</html>